<template>
  <div>
    <V-CommonHeaderLeft>
      <div class="business">
        <navigation :msg="navMsg"></navigation>
        <NavSearch :searchData="searchData" v-if="!ifCheckedAll"></NavSearch>
        <div class="check-div" v-if="ifCheckedAll">
          <span class="iconfont icon-test183" @click="checkedss([])"></span>
          <div>
            已选择
            <span class="checkedAllCount">{{checkeddata.length}}</span>项
          </div>
          <span class="shuxian"></span>
          <span>批量屏蔽</span>
          <span>清空屏蔽</span>
        </div>
        <el-table
          :data="tableData"
          :height="tableHeight"
          @select="checkedss"
          @select-all="checkedss"
          ref="multipleTable"
        >
          <el-table-column min-width="4%" type="selection"></el-table-column>
          <el-table-column label="商品名称/商品编号" min-width="28%">
            <template slot-scope="scope">
              <div class="business-content">
                <img src="../../../static/images/100.jpg">
                <div class="business-name">
                  <p>{{scope.row.name.name}}</p>
                  <span>{{scope.row.name.num}}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="分类" min-width="8%" prop="classification"></el-table-column>
          <el-table-column label="单位" min-width="8%" prop="company"></el-table-column>
          <el-table-column label="上/下架" min-width="8%" prop="statu"></el-table-column>
          <el-table-column label="销售价" min-width="10%" sortable prop="price"></el-table-column>
          <el-table-column label="屏蔽客户类型" min-width="12%" prop="type"></el-table-column>
          <el-table-column label="屏蔽所属区域" min-width="12%" prop="region"></el-table-column>
          <el-table-column label="屏蔽指定用户" min-width="12%" prop="customer"></el-table-column>
        </el-table>
        <Paging :msg="50" @pageNum="getPageNum" @pageId="getPageId"></Paging>
      </div>
    </V-CommonHeaderLeft>
  </div>
</template>

<script>
import VCommonHeaderLeft from '@/components/common/vCommonHeaderLeft/VCommonHeaderLeft'
import NavSearch from '@/components/common/navSearch/NavSearch'
import Paging from '@/components/common/paging/Paging'
import navigation from '@/components/common/navigation/Navigation'

export default {
  data () {
    return {
      ifCheckedAll: false,
      checkeddata: [],
      tableData: [
        {
          name: {
            img: '',
            name: '2017春夏季新款女鞋方头中口镂空真皮单鞋平底鞋子',
            num: 'M304'
          },
          classification: '粗跟',
          company: '双',
          statu: '上架',
          price: '￥199.00',
          type: '',
          region: '',
          customer: ''
        },
        {
          name: {
            img: '',
            name: '2017春夏季新款女鞋方头中口镂空真皮单鞋平底鞋子',
            num: 'M304'
          },
          classification: '粗跟',
          company: '双',
          statu: '上架',
          price: '￥199.00',
          type: '',
          region: '',
          customer: ''
        },
        {
          name: {
            img: '',
            name: '2017春夏季新款女鞋方头中口镂空真皮单鞋平底鞋子',
            num: 'M304'
          },
          classification: '粗跟',
          company: '双',
          statu: '上架',
          price: '￥199.00',
          type: '',
          region: '',
          customer: ''
        },
        {
          name: {
            img: '',
            name: '2017春夏季新款女鞋方头中口镂空真皮单鞋平底鞋子',
            num: 'M304'
          },
          classification: '粗跟',
          company: '双',
          statu: '上架',
          price: '￥199.00',
          type: '',
          region: '',
          customer: ''
        },
        {
          name: {
            img: '',
            name: '2017春夏季新款女鞋方头中口镂空真皮单鞋平底鞋子',
            num: 'M304'
          },
          classification: '粗跟',
          company: '双',
          statu: '上架',
          price: '￥199.00',
          type: '',
          region: '',
          customer: ''
        },
        {
          name: {
            img: '',
            name: '2017春夏季新款女鞋方头中口镂空真皮单鞋平底鞋子',
            num: 'M304'
          },
          classification: '粗跟',
          company: '双',
          statu: '上架',
          price: '￥199.00',
          type: '',
          region: '',
          customer: ''
        },
        {
          name: {
            img: '',
            name: '2017春夏季新款女鞋方头中口镂空真皮单鞋平底鞋子',
            num: 'M304'
          },
          classification: '粗跟',
          company: '双',
          statu: '上架',
          price: '￥199.00',
          type: '',
          region: '',
          customer: ''
        },
        {
          name: {
            img: '',
            name: '2017春夏季新款女鞋方头中口镂空真皮单鞋平底鞋子',
            num: 'M304'
          },
          classification: '粗跟',
          company: '双',
          statu: '上架',
          price: '￥199.00',
          type: '',
          region: '',
          customer: ''
        },
        {
          name: {
            img: '',
            name: '2017春夏季新款女鞋方头中口镂空真皮单鞋平底鞋子',
            num: 'M304'
          },
          classification: '粗跟',
          company: '双',
          statu: '上架',
          price: '￥199.00',
          type: '',
          region: '',
          customer: ''
        },
        {
          name: {
            img: '',
            name: '2017春夏季新款女鞋方头中口镂空真皮单鞋平底鞋子',
            num: 'M304'
          },
          classification: '粗跟',
          company: '双',
          statu: '上架',
          price: '￥199.00',
          type: '',
          region: '',
          customer: ''
        }
      ],
      searchData: [
        {
          numberingBox: true
        },
        [
          {
            placeholder: '请输入分类',
            classificationList: [
              {
                name: '饮料',
                children: [{
                  name: '毛衣',
                  children: [{
                    name: '衣服',
                    children: []
                  }]
                }]
              },
              {
                name: '卫衣',
                children: []
              },
              {
                name: '连衣裙',
                children: []
              },
              {
                name: '打底衫',
                children: []
              },
              {
                name: '短袖T恤',
                children: []
              },
              {
                name: '袜子',
                children: [{
                  name: '打底袜',
                  children: []
                },
                {
                  name: '隐形袜',
                  children: []
                },
                {
                  name: '运动袜',
                  children: []
                },
                {
                  name: '儿童袜',
                  children: []
                },
                {
                  name: '堆堆袜',
                  children: []
                },
                {
                  name: '商务袜',
                  children: []
                }]
              },
              {
                name: '下装',
                children: [
                  {
                    name: '短裤',
                    children: []
                  },
                  {
                    name: '铅笔裤',
                    children: []
                  },
                  {
                    name: '打底裤',
                    children: []
                  },
                  {
                    name: '牛仔裤',
                    children: []
                  },
                  {
                    name: '半身裙',
                    children: []
                  },
                  {
                    name: '短裙',
                    children: []
                  }]
              },
              {
                name: '上装',
                children: [
                  {
                    name: '针织衫',
                    children: []
                  },
                  {
                    name: '衬衫',
                    children: []
                  }
                ]
              },
              {
                name: '箱包',
                children: [
                  {
                    name: '鞋子',
                    children: [
                      {
                        name: '其他',
                        children: []
                      },
                      {
                        name: '凉鞋',
                        children: []
                      },
                      {
                        name: '粗跟',
                        children: []
                      },
                      {
                        name: '中跟',
                        children: []
                      },
                      {
                        name: '细跟',
                        children: []
                      },
                      {
                        name: '厚底松糕鞋',
                        children: []
                      }
                    ]
                  },
                  {
                    name: '双肩包',
                    children: []
                  },
                  {
                    name: '水桶包',
                    children: []
                  },
                  {
                    name: '手提包',
                    children: []
                  },
                  {
                    name: '拉杆箱',
                    children: []
                  },
                  {
                    name: '小方包',
                    children: []
                  }
                ]
              },
              {
                name: '未分类',
                children: []
              }
            ],
            labelList: []
          },
          {
            placeholder: '客户类型',
            classificationList: [],
            labelList: ['代理商', '批发商', '零售', '小']
          },
          {
            placeholder: '请输入屏蔽所属区域',
            classificationList: [
              {
                name: '华东区',
                children: [
                  {
                    name: '上海',
                    children: []
                  },
                  {
                    name: '浙江',
                    children: []
                  },
                  {
                    name: '福建',
                    children: []
                  },
                  {
                    name: '江苏',
                    children: []
                  }
                ]
              },
              {
                name: '华南区',
                children: [
                  {
                    name: '芜湖',
                    children: []
                  },
                  {
                    name: '广东',
                    children: []
                  },
                  {
                    name: '广西',
                    children: []
                  },
                  {
                    name: '海南',
                    children: []
                  }
                ]
              }
            ],
            labelList: []
          },
          {
            placeholder: '指定客户',
            classificationList: [],
            labelList: ['民治店', '桥老大', 'jnboy', 'boy', '123', 'JDSC', '上海豆豆', '18555564853', '123456', '55555']
          }
        ],
        {
          gaojiseach: false,
          daochu: false,
          daoru: false,
          add: false
        }
      ],
      navMsg: [
        {
          name: '商品',
          path: '/commodityList'
        }, {
          name: '经营屏蔽',
          path: '/businessShield'
        }
      ],
      tableHeight: window.innerHeight - 223
    }
  },
  components: {
    VCommonHeaderLeft,
    NavSearch,
    Paging,
    navigation
  },
  methods: {
    checkedss (value) {
      this.checkeddata = value
      if (value.length > 0) {
        this.ifCheckedAll = true
      } else {
        this.$refs.multipleTable.clearSelection()
        this.ifCheckedAll = false
      }
    },
    sliceArray (array, size, id) {
      let result = []
      for (let x = 0; x < Math.ceil(array.length / size); x++) {
        let start = x * size
        let end = start + size
        result.push(array.slice(start, end))
      }
      return result[id]
    },
    getPageId (id = 1) {
      this.pageId = id
      // this.stock = this.sliceArray(this.parentMsg, this.pageNum, id - 1)
    },
    getPageNum (num) {
      // console.log(num)
      this.pageNum = num
      this.getPageId()
      // console.log(this.stock)
    }
  },
  mounted () {
    const that = this
    window.onresize = () => {
      return (() => {
        window.tableHeight = window.innerHeight - 223
        that.tableHeight = window.tableHeight
      })()
    }
  }
}
</script>
<style lang="scss" scoped>
.business {
  width: 100%;
  padding-right: 10px;
  overflow: hidden;
}
.check-div {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 5px 0;
  line-height: 50px;
  background-color: #fff;
  width: 100%;
  font-size: 14px;
  color: #666;
  .icon-test183:before {
    width: 20px;
    height: 20px;
    font-size: 12px;
    color: #999;
  }
  span {
    margin: 0 25px;
  }
  div {
    margin-right: 100px;
  }
  .shuxian {
    display: inline-block;
    height: 30px;
    margin: 0;
    border-right: 1px solid #999;
  }
  .checkedAllCount {
    color: #20ade5;
    margin: 0;
  }
}
/deep/ table {
  thead {
    tr {
      th {
        padding: 0;
        font-weight: 400;
        font-size: 12px;
        overflow: hidden;
        height: 50px;
        line-height: 50px;
        border-top: 1px solid #e3e3e3;
        background-color: #fcfcfc;
      }
    }
  }
}
/deep/ table {
  tbody {
    tr {
      td {
        font-size: 12px;
        padding: 15px 0 10px 0;
        border-bottom: 1px solid #e3e3e3;
        .business-content {
          display: flex;
          align-items: center;
          img {
            width: 48px;
            height: 48px;
            margin-right: 5px;
          }
          .business-name {
            line-height: 16px;
            overflow: hidden;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
      }
    }
  }
}
</style>
